<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="<s:url value="/resources"/>/logistical/css/map.css" rel="stylesheet" type="text/css">
    <script src="<s:url value="/resources"/>/js/jquery-1.9.1.min.js"type="text/javascript"></script>
	<script type='text/javascript' src='<s:url value="/resources"/>/logistical/js/respond.min.js'></script>
     <script src="<s:url value="/resources"/>/echarts/build/dist/echarts.js"></script>
 <script type='text/javascript' src='<s:url value="/resources"/>/js/jquery-ui.custom.min.js'></script>
 <link href="<s:url value="/resources"/>/css/cupertino/jquery-ui.custom.min.css" rel="stylesheet" type="text/css"/>
      <script type='text/javascript' src='<s:url value="/resources"/>/logistical/js/myecharts/flowchart.js'></script>
       <script type='text/javascript' src='<s:url value="/resources"/>/js/SimpleCanleder.js'></script>
 	<link href="<s:url value="/resources"/>/css/SimpleCanleder.css" rel="stylesheet" type="text/css"/>
 	
<%--  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
     </script>
<script>
$(function(){
	$("#inputDate").datetimepicker({
		format: 'MM/dd/yyyy hh:mm',
        language: 'en',
        pickDate: true,
        pickTime: true,
        hourStep: 1,
        minuteStep: 15,
        secondStep: 30,
        inputMask: true});
});
</script> --%>
</head>
<body class="map_wlqx">
<!---头部 开始---->
 <!---<div class="header">
    <div class="nav">
     <a href="http://10.1.22.223:8028/bigdata.jspx" class="logo"><h1>CTCTC中国（太原）煤炭交易中心大数据</h1></a>
     
     <div class="nav_list">
     <a href="http://10.1.22.223:8028/bigdata.jspx">首页</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
     <a href="http://10.1.22.223:8028/bigdata/listAnalysisReport.jspx?preFlgId=44&flgId=46">数据分析报告</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
     <a href="http://10.1.22.223:8012/BIGDATA/baidumapcontroller/getCoalMapInfo">煤炭慧眼</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
     <a href="http://10.1.22.223:8012/BIGDATA" target="_black">数据中心</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
     &nbsp;&nbsp;&nbsp;<a href="#">登录</a>&nbsp;&nbsp;&nbsp;<a href="#">注册</a>&nbsp;&nbsp;&nbsp;
     <a href="http://10.1.22.223:8028" class="tborder">电商平台首页</a></div>
     <div class="nav_r"></div>
   </div>
  <div class="map_nav">
    <a href="#" class="map_nav_l"><h2>煤炭慧眼</h2></a>
    <div class="map_nav_r">
      <ul>
        <li class="bg_purple"><a href="#">铁路<br>流向图</a></li>
        <li class="bg_blue"><a href="#">交易商查询</a></li>
        <li class="bg_darkblue"><a href="#">煤矿<br>查询</a></li>
        <li class="bg_purple"><a href="#">钢厂<br>查询</a></li>
        <li class="bg_yellow"><a href="#">电厂<br>查询</a></li>
        <li class="bg_green"><a href="#">港口<br>查询</a></li>
        <li class="bg_grey"><a href="#">焦化厂查询</a></li>
        <li class="bg_red"><a href="#">水泥厂查询</a></li>
        <li class="bg_blue"><a href="#">物流<br>交易</a></li>
        <li class="bg_darkblue"><a href="#">主要运煤通道</a></li>
        <li class="bg_purple"><a href="#">船舶<br>查询</a></li>
      </ul>
    </div>
  </div>
 </div>---->
<!---头部 结束---->
<!---地图 开始---->
<div class="wrap">
  <!---左---->
  <form name="myform">
  <div class="map_wlqx_l">
   <div class="select clearfix">
     <div class="date-select l"><input type="text" id="inputDate" name="flowdate" class="ui-input ui-input-date"  readonly/>
     </div>
     <div class="city-select r"><input type="text" id="inputCity" name="flowcity" class="ui-input ui-input-loc" placeholder="请输入地级市" autocomplete="off"/>
     </div>
   </div>
   <div class="list">
     <div id="list_tit">
       <a>铁路发运地区</a>
       <a>铁路到达地区</a>
     </div>
     <input type="hidden" id="listval" name="listval" value="0"/>
     <div id="list_cont">
       <ul>
       <table class="list-table">
            <thead>
                <tr>
                    <th width="3%">&nbsp;&nbsp;&nbsp;&nbsp;</th>
                    <th width="23%" class="fromto">路线<span class="sep"></span></th>
                    <th width="19%" class="degree">发运量<span class="sep"></span></th>  
                    <th width="11%" class="green">电力</th>   
                    <th width="11%" class="yellow">化工</th>   
                    <th width="11%" class="blue">冶金</th>
                    <th width="11%" class="purple">出口</th>
                    <th width="11%" class="cyan">其他</th>
                </tr>
            </thead>
            <tbody>
                                   
         </tbody>
       </table>
       </ul>
       <ul>
          <table class="list-table">
              <thead>
                  <tr>
                      <th width="3%">&nbsp;&nbsp;&nbsp;&nbsp;</th>
                      <th width="23%" class="fromto">路线<span class="sep"></span></th>
                      <th width="19%" class="degree">发运量<span class="sep"></span></th>  
                      <th width="11%" class="green">电力</th>   
                      <th width="11%" class="yellow">化工</th>   
                      <th width="11%" class="blue">冶金</th>
                      <th width="11%" class="purple">出口</th>
                      <th width="11%" class="cyan">其他</th>
                  </tr>
              </thead>
              <tbody>
            </tbody>
          </table>
        </ul>
     </div>
     <script>
		var Tags=document.getElementById('list_tit').getElementsByTagName('a'); 
		var TagsCnt=document.getElementById('list_cont').getElementsByTagName('ul'); 
		var len=Tags.length; 
		var flag=0; //修改默认值
		for(i=0;i<len;i++){
			Tags[i].value = i;
			Tags[i].onmouseover=function(){
				if(this.value!=document.getElementById('listval').getAttribute("value")){
					changeNav(this.value);
					checklist();
				}
			}; 
			TagsCnt[i].className='undis';			
		}
			Tags[flag].className='over';
			TagsCnt[flag].className='dis';
			function changeNav(v){	
			Tags[flag].className='out';
			TagsCnt[flag].className='undis';
			flag=v;	
			Tags[v].className='over';
			TagsCnt[v].className='dis';
			document.getElementById('listval').setAttribute("value", v);
		}
		
		$("#inputDate").simpleCanleder();  
      </script>
   </div>
  </div>
  </form>
  <!---右---->
  <div class="r_echart" id="allmap">
    <!---此处为echart位置 使用时去掉.r_echart下background:#fff属性---->
  </div>

      
     

</body>
</html>
